ImageMaps - クイックスタート
このチュートリアルでクライアントサイドイメージマップ（ＨＴＭＬ）の作成を説明します。ＨＴＭＬのチュートリアルではありませんが、作成するイメージマップをあなとのコードに挿入する方法を教えます。
このチュートリアルで下記のファイルが必要です：
:Tutorial: - チュートリアルのファイルが入っています。
:Tutorial:Normal Imagemap:cow.html - チュートリアルのイメージマップ（コンパイル済み）
:Tutorial:Normal Imagemap:cow.map - チュートリアルのイメージマップ（未コンパイル）
:Tutorial:Graphics:cowLo.jpeg - 牛のピクチャー
目次：
●イメージマップとは何か？
●動作方法
●ImageMapper でイメージマップの作成
●ホームページに挿入する
●困った時
●イメージマップとは何か？
イメージマップを使用すると、１つのグラフィックはいくつかの部分に分解され、各部分に自分のリンクが付けます。例えば：日本の地図の上にクリックすると、クリックしたところの県のページが開かれます。
●動作方法
イメージマップのコードには２つの部分があります：「定義」と「宣言」。「定義」は タグの間の内容です。「定義」ではイメージの各部分リンクが指示されます。「宣言」ではホームページ内でイメージマップの位置が指示されます。下記の例文で「定義」は赤で表示され、「宣言」は緑で表示されます：
ImageMapper で作成！
「定義」は書類の 部分に入れることをお勧めします。「宣言」はホームページ内で表示される位置に挿入します。「宣言「は通常の ![]()
タグと同様ですが、「usemap」フィールドが追加されます。
● ImageMapper でイメージマップの作成
１）使用するイメージ（グラフィック）ファイルを選択します。
２）イメージファイルをImageMapper のアイコンにドラッグ＆ドロップします。そのイメージが含まれる新規書類は作成されます。又、ファイルメニューの「グラフィックを開く」コマンドを使用すると同様のことができます。
３）より小さいイメージを使用する場合は、「ズーム」ツールによってイメージを拡大することができます。逆に、より大きいイメージを使用する場合、「ズーム」ツールによってイメージを縮小することができます。「ズーム」ツールはイメージマップを編集するために使用して、コンパイルされたイメージマップを変更しません。
４）グラフィックツール（使用可能なツールは長方形、丸、多角形です）で「ホットスポット」をイメージ上に張ります。最初のオブジェクトは正確に作成できなくても、後で移動したり、サイズを調整したりすることができます。ウインドウの上位にあるバーをクリックすると「オブジェクト情報」ウインドウが表示され、各オブジェクトの設定を変更することができます。
５）イメージマップを保存しておいたほうがいいでしょう。
６）「ウインドウ」メニューから「オブジェクトエディタ」項目を選択します。各オブジェクトのパラメタを編集できるダイアログが表示されます。
７）各オブジェクトを選択して、「オブジェクトエディタ」の「ターゲット」パネルで各オブジェクトのリンクを入力します。例：「http://www」や「mailto:joe」。相対的なＵＲＬを入力しても構いません。
８）イメージマップをもう一度保存しておくといいでしょう。
９）「ツール」パレットの「テスト」タブにクリックします。オブジェクトは隠され、イメージだけ表示されるようになります。マウスをイメージの上に移動させると、各部分のリンクはウインドウの上位にある情報バーで表示されます。各部分にクリックすると、その部分のリンクは「Internet Config」で設定されたヘルパーアプリケーションで開かれます。
１０）イメージマップに満足しているならば、「イメージ」メニューから「イメージマップを作成」コマンドを選択します。そのコマンドを選択すると、使用できるコンパイラーを表示させるダイアログが表示されます。「Client-Side HTML」を選択して「コンパイル」ボタンをクリックします。イメージマップの設定を入力できるダイアログが表示されます。イメージマップはホームページでロードされていない時に「ALT」タグで設定されているテキストは表示されます。幅 / 高さのフィールドでイメージのサイズを設定できます。デフォルトであなたのイメージと同じですが、変更するとあなたのイメージマップはスケールされます。 「名前」フィールドでイメージマップの名前を入力します。ホームページ上で複数イメージマップを使用している時、各イメージマップに別の名前を付けて下さい。「タイトル」フィールドで入力するテキストはブラウザのタイトルバーで表示されます。「ハイライトイメージマップ」についての詳しい説明はそのチュートリアルをご覧下さい。
１１）「作成」ボタンを押すと、ＨＴＭＬコードを表示するテキストウインドウは表示されます。その書類を保存して、ブラウザで開いてみて下さい。イメージのデフォルトパスはあなたの「.html」ファイルと同じディレクトリですが、変更する必要がある場合もあります。
１２）あなたのホームページにＨＴＭＬコードを挿入します。
１３）リラックス
●ホームページに挿入する
イメージマップのコードには２つの部分があります：「定義」と「宣言」。「定義」と「宣言」の詳しいことは上記の説明をご覧下さい。イメージマップを ImageMapper でコンパイルするとできるだけ早く確認できるため通常のＨＴＭＬファイルは作成されます。作成されたイメージマップをあなたのホームページに挿入する時にＨＴＭＬコードの要らない部分もあります。
イメージマップを正しく機能させるため、両方の部分を同じＨＴＭＬファイルで存在しておく必要があります。「定義」は タグの間に挿入して、「宣言」は通常のイメージと同じように好みのところにペーストすればいいのです。それだけでイメージマップを使用できるようになります！
ホームページのディレクトリが作成されたＨＴＭＬファイルのディレクトリと違いがある場合に、 リンクを調整する必要があります。
●困った時
イメージマップが正しく機能しない場合もあります。この時に下記のことを確認
して下さい：
古いＷＷＷブラウザ？
「Netscape」や「Internet Explorer」の最新バージョンを使用していることを確認して下さい。より古いブラウザではイメージマップが正しく表示されない場合があります。
ブラウザで「イメージをロード」オプションをＯＮにして下さい。
分かると思いますが、これはよくある間違いです。
ディレクトリを確認して下さい。
グラフィックファイルのディレクトリは正しく入力されていることを確認して下さい。ファイルを移動するとディレクトリは変わります。又は、大文字、小文字は認識されない場合がありますので、ご注意下さい。
不明なイメージフォーマット
ImageMapper では慣用的なフォーマットはほとんど対応しますが、より珍しいフォーマットはブラウザで正しく表示されない場合があります。「JPEG」と「GIF」フォーマットはよく使われているので、そういうフォーマットを使用することをお勧めします。